<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>{{title}}</h1>
			<!-- 使用局部组件 -->
			<abc></abc>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	<!-- 1.创建组件的模板 -->
	<template id="temp">
		<div>
			这是一个{{title}}的容器
		</div>
	</template>
	
	<script type="text/javascript">
		// 2.创建组件对象
		let temp = {
			data:()=>{
				return {
					title:"局部组件"
				}
			},
			// 查找对应的组件模板
			template: "#temp"
		}
		
		const vm1 = new Vue({
		    el:"#app",
			data:{
				title:"测试局部组件"
			},
			// 3.注册组件
			components:{
				"abc": temp
			}
		});
	</script>
</html>
